<template>
  <n-menu
    :collapsed="collapsed"
    :collapsed-width="64"
    :collapsed-icon-size="22"
    :options="menuOptions"
    :value="activeKey"
    @update:value="handleMenuSelect"
  />
</template>

<script setup lang="ts">
import { computed, h } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/store'
import { NMenu, NIcon } from 'naive-ui'
import Icons from './Icons.vue'

const router = useRouter()
const route = useRoute()
const { t } = useI18n({ useScope: 'global' })
const appStore = useAppStore()

const collapsed = computed(() => appStore.collapsed)

const activeKey = computed(() => {
  const path = route.path
  if (path.includes('/news/list')) return '/news/list'
  if (path.includes('/news/review')) return '/news/review'
  if (path.includes('/news/edit')) return '/news/list'
  if (path.includes('/user/list')) return '/user/list'
  if (path.includes('/user/creator-review')) return '/user/creator-review'
  if (path.includes('/comment/list')) return '/comment/list'
  if (path.includes('/report/list')) return '/report/list'
  if (path.includes('/toolbox/file-list')) return '/toolbox/file-list'
  return path
})

const renderIcon = (iconName: string) => {
  if (iconName.endsWith('.svg')) {
    return () => h('img', { src: iconName, style: 'width: 20px; height: 20px;' })
  }
  return () => h(NIcon, null, { default: () => h(Icons, { name: iconName }) })
}

const menuOptions = computed(() => [
  {
    label: t('menu.dashboard'),
    key: '/dashboard',
    icon: renderIcon('speedometer-outline')
  },
  {
    label: t('menu.news'),
    key: '/news',
    icon: renderIcon('newspaper-outline'),
    children: [
      {
        label: t('menu.newsList'),
        key: '/news/list',
        icon: renderIcon('list-outline')
      },
      {
        label: t('menu.newsReview'),
        key: '/news/review',
        icon: renderIcon('checkmark-circle-outline')
      }
    ]
  },
  {
    label: t('menu.user'),
    key: '/user',
    icon: renderIcon('people-outline'),
    children: [
      {
        label: t('menu.userList'),
        key: '/user/list',
        icon: renderIcon('person-outline')
      },
      {
        label: t('menu.creatorReview'),
        key: '/user/creator-review',
        icon: renderIcon('checkmark-circle-outline')
      }
    ]
  },
  {
    label: t('menu.comment'),
    key: '/comment',
    icon: renderIcon('chatbox-ellipses-outline'),
    children: [
      {
        label: t('menu.commentList'),
        key: '/comment/list',
        icon: renderIcon('document-text-outline')
      }
    ]
  },
  {
    label: t('menu.report'),
    key: '/report',
    icon: renderIcon('warning-outline'),
    children: [
      {
        label: t('menu.reportList'),
        key: '/report/list',
        icon: renderIcon('alert-circle-outline')
      }
    ]
  },
  {
    type: 'divider',
    key: 'd1'
  },
  {
    label: t('menu.toolbox'),
    key: '/toolbox',
    icon: renderIcon('/icons/BoxToolbox20Regular.svg'),
    children: [
      {
        label: t('menu.clearToken'),
        key: '/toolbox/clear-token',
        icon: renderIcon('trash-outline')
      },
      {
        label: '文件列表',
        key: '/toolbox/file-list',
        icon: renderIcon('document-outline')
      }
    ]
  }
])

const handleMenuSelect = (key: string) => {
  router.push(key)
}
</script>
